<template>
  <div class="space-y-6">
    <!-- 页面标题 -->
    <div class="rounded-[0.6rem] p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
      <h1 class="text-2xl font-bold text-gray-900 mb-2">帮助中心</h1>
      <p class="text-gray-600">为您提供全面的使用指南和常见问题解答</p>
    </div>

    <!-- 搜索框 -->
    <div class="rounded-[0.6rem] p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
      <div class="relative max-w-md mx-auto">
        <input
          v-model="searchKeyword"
          type="text"
          placeholder="搜索帮助内容..."
          class="w-full border border-gray-300 rounded-[0.6rem] pl-10 pr-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
          style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
        >
        <i class="icon-[heroicons--magnifying-glass] w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2"></i>
      </div>
    </div>

    <!-- 快速导航 -->
    <div class="rounded-[0.6rem] p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">快速导航</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <button
          v-for="category in helpCategories"
          :key="category.id"
          @click="selectedCategory = category.id"
          class="flex flex-col items-center p-4 border border-gray-200 rounded-[0.6rem] hover:border-blue-300 transition-all duration-200 active:scale-[0.985]"
          style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          :class="{ 'border-blue-500 bg-blue-50': selectedCategory === category.id }"
        >
          <i :class="[category.icon, 'w-8 h-8 text-blue-600 mb-2']"></i>
          <span class="text-sm font-medium text-gray-900">{{ category.name }}</span>
          <span class="text-xs text-gray-500 mt-1">{{ category.count }}个问题</span>
        </button>
      </div>
    </div>

    <!-- 常见问题 -->
    <div class="rounded-[0.6rem] p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
      <h2 class="text-lg font-semibold text-gray-900 mb-6">常见问题</h2>
      <div class="space-y-4">
        <div
          v-for="faq in filteredFAQs"
          :key="faq.id"
          class="border border-gray-200 rounded-[0.6rem] overflow-hidden"
          style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
        >
          <button
            @click="toggleFAQ(faq.id)"
            class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-100 transition-all duration-200"
          >
            <div class="flex items-start space-x-3">
              <i :class="[getCategoryIcon(faq.category), 'w-5 h-5 text-blue-600 mt-0.5']"></i>
              <div>
                <h3 class="font-medium text-gray-900">{{ faq.question }}</h3>
                <p class="text-sm text-gray-500 mt-1">{{ getCategoryName(faq.category) }}</p>
              </div>
            </div>
            <i
              class="icon-[heroicons--chevron-down] w-5 h-5 text-gray-400 transition-transform"
              :class="{ 'transform rotate-180': expandedFAQs.includes(faq.id) }"
            ></i>
          </button>
          
          <div
            v-if="expandedFAQs.includes(faq.id)"
            class="px-6 py-4 bg-gray-50 border-t border-gray-200"
          >
            <div class="prose prose-sm max-w-none text-gray-700" v-html="faq.answer"></div>
            
            <!-- 相关链接 -->
            <div v-if="faq.relatedLinks && faq.relatedLinks.length > 0" class="mt-4">
              <p class="text-sm font-medium text-gray-900 mb-2">相关链接：</p>
              <div class="space-y-1">
                <a
                  v-for="link in faq.relatedLinks"
                  :key="link.url"
                  :href="link.url"
                  class="block text-sm text-blue-600 hover:text-blue-800 hover:underline"
                >
                  {{ link.title }}
                </a>
              </div>
            </div>
            
            <!-- 反馈按钮 -->
            <div class="mt-4 flex items-center space-x-4">
              <span class="text-sm text-gray-600">这个回答对您有帮助吗？</span>
              <button
                @click="submitFeedback(faq.id, 'helpful')"
                class="text-sm text-green-600 hover:text-green-800 font-medium"
              >
                👍 有帮助
              </button>
              <button
                @click="submitFeedback(faq.id, 'not-helpful')"
                class="text-sm text-red-600 hover:text-red-800 font-medium"
              >
                👎 没帮助
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div v-if="filteredFAQs.length === 0" class="text-center py-12">
        <i class="icon-[heroicons--question-mark-circle] w-12 h-12 text-gray-400 mx-auto mb-4"></i>
        <p class="text-gray-500">没有找到相关问题</p>
        <p class="text-sm text-gray-400 mt-1">试试其他关键词或联系客服</p>
      </div>
    </div>

    <!-- 联系客服 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">联系我们</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="flex items-start space-x-3">
          <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
            <i class="icon-[heroicons--phone] w-5 h-5 text-blue-600"></i>
          </div>
          <div>
            <h3 class="font-medium text-gray-900">电话咨询</h3>
            <p class="text-sm text-gray-600 mt-1">0571-88888888</p>
            <p class="text-xs text-gray-500 mt-1">工作时间：9:00-17:00</p>
          </div>
        </div>
        
        <div class="flex items-start space-x-3">
          <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
            <i class="icon-[heroicons--chat-bubble-left-right] w-5 h-5 text-green-600"></i>
          </div>
          <div>
            <h3 class="font-medium text-gray-900">在线客服</h3>
            <p class="text-sm text-gray-600 mt-1">即时回复</p>
            <button class="text-xs text-blue-600 hover:text-blue-800 mt-1">开始对话</button>
          </div>
        </div>
        
        <div class="flex items-start space-x-3">
          <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
            <i class="icon-[heroicons--envelope] w-5 h-5 text-purple-600"></i>
          </div>
          <div>
            <h3 class="font-medium text-gray-900">邮件支持</h3>
            <p class="text-sm text-gray-600 mt-1">support@university.edu.cn</p>
            <p class="text-xs text-gray-500 mt-1">24小时内回复</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户手册 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">用户手册</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <a
          v-for="manual in userManuals"
          :key="manual.id"
          :href="manual.url"
          class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition-colors"
        >
          <i :class="[manual.icon, 'w-6 h-6 text-blue-600']"></i>
          <div class="flex-1">
            <h3 class="font-medium text-gray-900">{{ manual.title }}</h3>
            <p class="text-sm text-gray-600 mt-1">{{ manual.description }}</p>
          </div>
          <i class="icon-[heroicons--arrow-top-right-on-square] w-4 h-4 text-gray-400"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAppStore } from '../../stores/app'

const appStore = useAppStore()

// 响应式数据
const searchKeyword = ref('')
const selectedCategory = ref('all')
const expandedFAQs = ref([])

// 帮助分类
const helpCategories = ref([
  {
    id: 'all',
    name: '全部',
    icon: 'icon-[heroicons--squares-2x2]',
    count: 15
  },
  {
    id: 'registration',
    name: '报到办理',
    icon: 'icon-[heroicons--clipboard-document-check]',
    count: 5
  },
  {
    id: 'payment',
    name: '缴费相关',
    icon: 'icon-[heroicons--currency-yen]',
    count: 4
  },
  {
    id: 'dormitory',
    name: '宿舍申请',
    icon: 'icon-[heroicons--home]',
    count: 3
  },
  {
    id: 'account',
    name: '账号问题',
    icon: 'icon-[heroicons--user]',
    count: 3
  }
])

// 常见问题数据
const faqs = ref([
  {
    id: 1,
    category: 'registration',
    question: '如何完成新生报到？',
    answer: `<p>新生报到需要按照以下步骤进行：</p>
             <ol>
               <li>登录学生服务平台</li>
               <li>完善个人信息</li>
               <li>完成学费缴纳</li>
               <li>申请宿舍</li>
               <li>上传体检报告</li>
               <li>到校现场报到</li>
             </ol>
             <p>每个步骤都有详细的操作指南，请按顺序完成。</p>`,
    relatedLinks: [
      { title: '报到办理页面', url: '/student/registration' },
      { title: '新生入学指南', url: '#' }
    ]
  },
  {
    id: 2,
    category: 'payment',
    question: '支持哪些缴费方式？',
    answer: `<p>我们支持多种缴费方式：</p>
             <ul>
               <li><strong>在线支付：</strong>支付宝、微信支付、银行卡</li>
               <li><strong>银行转账：</strong>通过指定银行账户转账</li>
               <li><strong>现场缴费：</strong>到校财务处现金或刷卡缴费</li>
             </ul>
             <p>推荐使用在线支付，方便快捷且有缴费记录。</p>`,
    relatedLinks: [
      { title: '缴费中心', url: '/student/payment' }
    ]
  },
  {
    id: 3,
    category: 'dormitory',
    question: '如何选择宿舍？',
    answer: `<p>宿舍选择流程：</p>
             <ol>
               <li>查看可用宿舍楼信息</li>
               <li>了解不同宿舍的价格和设施</li>
               <li>选择合适的宿舍楼和房间</li>
               <li>查看室友信息（如有）</li>
               <li>提交申请等待审核</li>
             </ol>
             <p>建议尽早申请，热门宿舍名额有限。</p>`,
    relatedLinks: [
      { title: '宿舍申请', url: '/student/dormitory' }
    ]
  },
  {
    id: 4,
    category: 'account',
    question: '忘记密码怎么办？',
    answer: `<p>如果忘记密码，可以通过以下方式重置：</p>
             <ol>
               <li>在登录页面点击"忘记密码"</li>
               <li>输入学号和注册邮箱</li>
               <li>查收邮件中的重置链接</li>
               <li>设置新密码</li>
             </ol>
             <p>如果邮箱也无法使用，请联系管理员协助处理。</p>`,
    relatedLinks: [
      { title: '登录页面', url: '/student/login' }
    ]
  },
  {
    id: 5,
    category: 'registration',
    question: '报到截止时间是什么时候？',
    answer: `<p>新生报到的重要时间节点：</p>
             <ul>
               <li><strong>在线报到截止：</strong>2024年8月31日</li>
               <li><strong>现场报到时间：</strong>2024年9月1日-2日</li>
               <li><strong>补报到时间：</strong>2024年9月3日-5日</li>
             </ul>
             <p>请务必在规定时间内完成报到，逾期可能影响正常入学。</p>`
  },
  {
    id: 6,
    category: 'payment',
    question: '缴费后多久能看到缴费记录？',
    answer: `<p>缴费记录更新时间：</p>
             <ul>
               <li><strong>在线支付：</strong>实时更新</li>
               <li><strong>银行转账：</strong>1-2个工作日</li>
               <li><strong>现场缴费：</strong>当天更新</li>
             </ul>
             <p>如果超过预期时间仍未显示，请联系财务处核实。</p>`
  },
  {
    id: 7,
    category: 'dormitory',
    question: '可以更换宿舍吗？',
    answer: `<p>宿舍更换政策：</p>
             <ul>
               <li>入学后第一学期原则上不允许更换</li>
               <li>特殊情况可申请调换（如健康原因）</li>
               <li>第二学期开始可申请调换</li>
               <li>需要双方同意且有空余床位</li>
             </ul>
             <p>更换申请需要提供充分理由并经过审批。</p>`
  },
  {
    id: 8,
    category: 'account',
    question: '如何修改个人信息？',
    answer: `<p>修改个人信息步骤：</p>
             <ol>
               <li>登录学生服务平台</li>
               <li>进入"个人信息"页面</li>
               <li>点击"编辑"按钮</li>
               <li>修改需要更新的信息</li>
               <li>保存并等待审核</li>
             </ol>
             <p>重要信息修改可能需要提供相关证明材料。</p>`,
    relatedLinks: [
      { title: '个人信息', url: '/student/profile' }
    ]
  }
])

// 用户手册
const userManuals = ref([
  {
    id: 1,
    title: '新生入学完整指南',
    description: '从报到到入学的完整流程指南',
    icon: 'icon-[heroicons--book-open]',
    url: '#'
  },
  {
    id: 2,
    title: '学生服务平台使用手册',
    description: '平台功能详细使用说明',
    icon: 'icon-[heroicons--computer-desktop]',
    url: '#'
  },
  {
    id: 3,
    title: '宿舍生活指南',
    description: '宿舍管理规定和生活须知',
    icon: 'icon-[heroicons--home]',
    url: '#'
  },
  {
    id: 4,
    title: '校园生活手册',
    description: '校园设施和服务介绍',
    icon: 'icon-[heroicons--map]',
    url: '#'
  }
])

// 计算属性
const filteredFAQs = computed(() => {
  let filtered = faqs.value
  
  // 按分类筛选
  if (selectedCategory.value !== 'all') {
    filtered = filtered.filter(faq => faq.category === selectedCategory.value)
  }
  
  // 按关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(faq => 
      faq.question.toLowerCase().includes(keyword) ||
      faq.answer.toLowerCase().includes(keyword)
    )
  }
  
  return filtered
})

// 方法
const toggleFAQ = (faqId) => {
  const index = expandedFAQs.value.indexOf(faqId)
  if (index > -1) {
    expandedFAQs.value.splice(index, 1)
  } else {
    expandedFAQs.value.push(faqId)
  }
}

const getCategoryIcon = (category) => {
  const categoryData = helpCategories.value.find(cat => cat.id === category)
  return categoryData?.icon || 'icon-[heroicons--question-mark-circle]'
}

const getCategoryName = (category) => {
  const categoryData = helpCategories.value.find(cat => cat.id === category)
  return categoryData?.name || '其他'
}

const submitFeedback = (faqId, type) => {
  // 这里可以发送反馈到后端
  const message = type === 'helpful' ? '感谢您的反馈！' : '我们会继续改进这个回答'
  appStore.showSuccess(message)
}

// 生命周期
onMounted(() => {
  appStore.setPageTitle('帮助中心')
})
</script>

<style scoped>
@reference "tailwindcss"
/* 自定义样式 */
.prose ol {
  @apply list-decimal list-inside space-y-1;
}

.prose ul {
  @apply list-disc list-inside space-y-1;
}

.prose li {
  @apply text-sm;
}

.prose strong {
  @apply font-semibold;
}
</style>